import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:safetymonitor/app/components/toast_widget.dart';
import 'package:safetymonitor/app/core/core.dart';
import 'package:safetymonitor/app/core/ext/widget_extension.dart';
import 'package:safetymonitor/app/core/http/network_manger.dart';
import 'package:safetymonitor/generated/assets.dart';
import 'package:safetymonitor/global.dart';
import 'package:safetymonitor/modules/auth/login/controller.dart';

/// 登录页面
class LoginPage extends StatelessWidget {
  LoginPage({super.key});

  final controller = Get.put(LoginController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: controller,
        builder: (_) {
          return Scaffold(
            resizeToAvoidBottomInset: false, // 确保当键盘弹出时调整布局
            body: Container(
              alignment: Alignment.topLeft,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color(0xFFE6F2FF),
                    // Color(0xFF61C2FE),
                    Color(0xFFFAFCFF),
                  ],
                ),
              ),
              child: Stack(
                alignment: Alignment.topLeft,
                children: [
                  SizedBox(
                    width: double.infinity,
                    child: SvgPicture.asset(
                      'assets/svg/imagesBgLogintwo.svg',
                      fit: BoxFit.fill,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(right: 20.w, left: 20.w, top: 140.w),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SvgPicture.asset(
                          'assets/svg/jdc_icon.svg',
                        ).click(() {
                          AppToast.showSuccess(NetworkManager.getNetWorkInfo() == 'extranet' ? '外网' : '内网');
                        }),
                        Text(
                          '欢迎使用',
                          style: TextStyle(
                            fontSize: 36.sp,
                            color: const Color(0xFF3D4769),
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        AppGaps.vGap6,

                        Text(
                          '金 钼 集 团 预 警 信 息 平 台',
                          style: TextStyle(
                            fontSize: 15.sp,
                            color: const Color(0xFF6C779C),
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        // AppGaps.vGap10,
                        // Container(
                        //   decoration: BoxDecoration(
                        //     color: const Color(0xFFFFFFFF),
                        //     borderRadius: BorderRadius.circular(30.w),
                        //   ),
                        //   width: 38.w,
                        //   height: 4.w,
                        // ),
                        AppGaps.vGap50,
                        // 用户名
                        _userNameInput(),
                        AppGaps.vGap24,
                        // 密码
                        _passwordInput(),
                        AppGaps.vGap16,
                        // _networkSwitch(),
                        // 验证码
                        // _verificationCodeInput(),
                        const Spacer(),
                        Container(
                          height: 48.w,
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: const Color(0xFF1847E3),
                            borderRadius: BorderRadius.circular(20.w),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '登录',
                            style: TextStyle(
                              color: const Color(0xFFFFFFFF),
                              fontSize: 16.sp,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ).clickOnce(controller.onLogin),
                        AppGaps.vGap60,
                        _versionInfo(),
                      ],
                    ),
                  ),

                  // SvgPicture.asset(Assets.imagesBgLogin, width: AppDimens.sw, height: 258.w),
                ],
              ),
            ),
          );
        });
  }

  /// 账号输入框
  Widget _userNameInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            SvgPicture.asset(
              Assets.imagesIconUserName,
              height: 20.w,
              width: 20.w,
            ),
            AppGaps.hGap10,
            Text(
              '账号',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w400,
                color: const Color(0xFF3D4769),
              ),
            ),
          ],
        ),
        AppGaps.vGap12,
        Container(
          decoration: BoxDecoration(
            color: const Color(0xFFFFFFFF),
            borderRadius: BorderRadius.circular(6.w),
          ),
          padding: EdgeInsets.symmetric(vertical: 11.w, horizontal: 20.w),
          alignment: Alignment.center,
          child: TextField(
            controller: controller.userNameEditing,
            keyboardType: TextInputType.text,
            style: TextStyle(
              color: const Color(0xFF3D4769),
              fontSize: 15.sp,
            ),
            decoration: InputDecoration(
              hintText: '请输入用户账号',
              hintStyle: TextStyle(
                color: const Color(0xFFC7CEE5),
                fontSize: 14.sp,
                height: 1.2,
                fontWeight: FontWeight.w400,
              ),
              //防止适配不居中
              isCollapsed: true,
              border: const OutlineInputBorder(borderSide: BorderSide.none),
            ),
          ),
        ),
      ],
    );
  }

  /// 密码输入框
  Widget _passwordInput() {
    return Obx(() {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              SvgPicture.asset(
                Assets.imagesIconPassword,
                height: 20.w,
                width: 20.w,
              ),
              AppGaps.hGap10,
              Text(
                '密码',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w400,
                  color: const Color(0xFF3D4769),
                ),
              ),
            ],
          ),
          AppGaps.vGap12,
          Container(
            decoration: BoxDecoration(
              color: const Color(0xFFFFFFFF),
              borderRadius: BorderRadius.circular(6.w),
            ),
            // padding: EdgeInsets.symmetric(vertical: 11.w, horizontal: 20.w),
            padding: EdgeInsets.only(left: 20.w, right: 10.w, top: 11.w, bottom: 11.w),
            alignment: Alignment.center,
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    obscureText: controller.isHidePassword.value,
                    controller: controller.passwordEditing,
                    keyboardType: TextInputType.text,
                    style: TextStyle(
                      color: const Color(0xFF3D4769),
                      fontSize: 15.sp,
                    ),
                    decoration: InputDecoration(
                      hintText: '请输入登录密码',
                      hintStyle: TextStyle(
                        color: const Color(0xFFC7CEE5),
                        fontSize: 14.sp,
                        height: 1.2,
                        fontWeight: FontWeight.w400,
                      ),
                      //防止适配不居中
                      isCollapsed: true,
                      border: const OutlineInputBorder(borderSide: BorderSide.none),
                    ),
                  ),
                ),
                Container(
                    alignment: Alignment.center,
                    width: 40.w,
                    child: SvgPicture.asset(
                      controller.isHidePassword.value ? Assets.imagesIconPasswordHide : Assets.imagesIconPasswordShow,
                      height: 22.w,
                      width: 22.w,
                      // colorFilter: const ColorFilter.mode(Color(0xFFFFFFFF), BlendMode.srcIn),
                    )).clickOnce(controller.onHidePasswordChanged),
              ],
            ),
          ),
        ],
      );
    });
  }


  /// 验证码
  Widget _verificationCodeInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            SvgPicture.asset(
              Assets.imagesIconVerificationCode,
              height: 20.w,
              width: 20.w,
            ),
            AppGaps.hGap10,
            Text(
              '验证码',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w400,
                color: const Color(0xFFFFFFFF),
              ),
            ),
          ],
        ),
        AppGaps.vGap16,
        Container(
          decoration: BoxDecoration(
            color: const Color(0xFFFFFFFF).withOpacity(0.3),
            borderRadius: BorderRadius.circular(14.w),
          ),
          padding: EdgeInsets.symmetric(vertical: 11.w, horizontal: 20.w),
          alignment: Alignment.center,
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  controller: controller.verificationEditing,
                  keyboardType: TextInputType.number,
                  style: TextStyle(
                    color: const Color(0xFFffffff),
                    fontSize: 15.sp,
                  ),
                  decoration: InputDecoration(
                    hintText: '请输入验证码',
                    hintStyle: TextStyle(
                      color: const Color(0xFFFFFFFF).withOpacity(0.4),
                      fontSize: 14.sp,
                      height: 1.2,
                      fontWeight: FontWeight.w400,
                    ),
                    //防止适配不居中
                    isCollapsed: true,
                    border: const OutlineInputBorder(borderSide: BorderSide.none),
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                width: 100.w,
                height: 40.w,
                decoration: BoxDecoration(
                  color: const Color(0xFFFFFFFF).withOpacity(0.3),
                  borderRadius: BorderRadius.circular(14.w),
                ),
                child: Obx(() {
                  return controller.baseImageBase64.value == ''
                      ? Text(
                          '获取验证码',
                          style: TextStyle(
                            color: const Color(0xFFFFFFFF),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                          ),
                        )
                      : Image.memory(
                          base64Decode(controller.baseImageBase64.value),
                          height: 40.w,
                          fit: BoxFit.fill,
                        );
                }),
              ).clickOnce(controller.onGetVerificationCode),
            ],
          ),
        ),
      ],
    );
  }

  /// 版本信息
  Widget _versionInfo() {
    return Container(
      alignment: Alignment.center,
      child: Column(
        children: [
          Text(
            '华荣科技股份有限公司技术支持',
            style: TextStyle(
              fontSize: 12.sp,
              color: const Color(0xFF6C779C),
              fontWeight: FontWeight.w400,
            ),
          ),
          AppGaps.vGap10,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(width: 36.w, height: 1.w, color: const Color(0xFFC7CEE5)),
              Text(
                'v${Global.packageInfo.version}',
                style: TextStyle(
                  fontSize: 12.sp,
                  fontWeight: FontWeight.w400,
                  color: const Color(0xFF6C779C),
                ),
              ).marginSymmetric(horizontal: 8.w),
              Container(width: 36.w, height: 1.w, color: const Color(0xFFC7CEE5)),
            ],
          ),
          AppGaps.vGap30
        ],
      ),
    );
  }
}
